<template>
  <view class="main">
    <view class="top">
      <search leftWidth='300' bgColor='black'>
        <blockquote @click='goBack' slot="leftMain">
          <view class="left">
            <u-icon name="arrow-left" color="white" size="28"></u-icon> <text>历史记录</text>
          </view>
        </blockquote>
      </search>
    </view>
    <view class="abottom">
      <view class="testb">
        <blockquote v-show="historyList.legnth!=0">
          <view @click="goDetail(e.historyInfo[0])" v-for="e in historyList" :key='e._id' class="item">
            <view class="left">
              <view class="left_title">
                <text>{{e.historyInfo[0].title}}</text>
              </view>
              <view class="left_detail">
                <text>{{e.historyInfo[0].origin}}</text> <text>{{e.historyInfo[0].hotRate}}评论</text>
                <text>{{e.historyInfo[0].time}}</text>
                <text>
                  {{e.createTime}}
                </text>
              </view>
            </view>
            <view class="right">
              <u--image :showLoading="true"
                :src="e.historyInfo[0].cover||'http://bjnewsrec-cv.ws.126.net/little59837527bbej00rm5yd800c0d200u000gkg00it00ad.jpg?imageView&thumbnail=140y88&quality=85'"
                width="160rpx" height="136rpx"></u--image>
            </view>
          </view>
        </blockquote>
        <blockquote v-show="historyList.legnth==0">
          <text style="color: #cccccc;margin:100rpx">
            暂无历史记录
          </text>
        </blockquote>
      </view>
    </view>
  </view>
</template>

<script>
  import search from "@/component/search/search.vue";
  import {
    cmode
  } from '@/env.js'
  import {
    gethistorylist
  } from '@/api/user.js'
  import {
    mapState,
    mapMutations
  } from "vuex"
  export default {
    components: {
      search
    },
    data() {
      return {
        historyList: [],
        basesrc: cmode,
      };
    },
    computed: {
      dealImgs() {
        return function(data) {
          return this.basesrc + data
        };
      }
    },
    methods: {
      ...mapMutations("m_test", ["setStatusBar", "setSystemBar", "setCustomBar", "setDetailInfo"]),
      goBack() {
        this.$Router.back()
      },
      cgethistorylist() {
        gethistorylist().then(res => {

          this.historyList = res.data.filter(e => e.historyInfo.length != 0)
          console.log(this.historyList, 111);
        })
      },
      goDetail(e) {
        this.setDetailInfo(e)
        this.$Router.push(`/subpkg/newsDetail/newsDetail`)
      },
    },
    onShow() {
      this.cgethistorylist()
    },
    onReady() {
      this.cgethistorylist()
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    width: 100vw;
    height: auto;

    .abottom {
      width: 100vw;
      height: auto;
      background-color: white;
      margin: calc(var(--status-bar-height) + 100rpx) auto;
      color: black;
      box-sizing: border-box;
      font-size: 28rpx;

      .testb {
        width: 100vw;

        .item {
          display: flex;
          width: 100%;
          height: 136rpx;
          justify-content: space-around;
          align-items: center;
          border-bottom: 4rpx solid #c00000;
          padding: 10rpx;

          .left {
            width: calc(100% - 220rpx);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .left_title {
              font-size: 24rpx;
            }

            .left_detail {
              display: flex;
              justify-content: space-evenly;
              font-size: 20rpx;

              text:nth-child(2) {
                margin: 0 30rpx;
              }
            }
          }

          .right {
            margin-right: 20rpx;
          }
        }
      }
    }

    .top {
      width: 100vw;
      height: 100rpx;
      position: fixed;
      top: 0;
      z-index: 1;

      .left {
        font-size: 28rpx;
        display: flex;
        align-items: center;
      }

    }
  }
</style>
